<template>
    <div class="loginBody">
        <div class="loginContent">
            <h1>星空博客</h1>
            <el-card class="card_Login">
                <template #header>用户登录</template>
                <div class="loginForm">
                    <img src="@/assets/image/avator.jpg" alt="">
                    <el-form v-model="loginForm">
                        <el-form-item label="账号：" prop="username">
                            <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码：" prop="code">
                            <el-button style="width: 200px;" :color="isVerify ? 'green' : '#626aef'"
                                @click="slideVerifyDialog = true">{{ isVerify ? "验证通过" : "人机验证" }}</el-button>
                        </el-form-item>
                        <el-button color="#626aef" @click="Login">登录</el-button>
                        <router-link to="/toRegister"><a href="#">还没有账号?点击注册</a></router-link>
                    </el-form>
                </div>
            </el-card>
            <el-card class="card_Register">
                <template #header>用户注册</template>
                <div class="loginForm">
                    <!-- <img src="@/assets/image/avator.jpg" alt="">
                    <el-form v-model="loginForm">
                        <el-form-item label="账号：" prop="username">
                            <el-input type="text" v-model="loginForm.username" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码：" prop="code">
                            <el-button style="width: 200px;" :color="isVerify ? 'green' : '#626aef'"
                                @click="slideVerifyDialog = true">{{ isVerify ? "验证通过" : "人机验证" }}</el-button>
                        </el-form-item>
                        <el-button color="#626aef" @click="Login">登录</el-button>
                        <router-link to="/toRegister"><a href="#">还没有账号?点击注册</a></router-link>
                    </el-form> -->
                </div>
            </el-card>
            <h4>星空博客@流浪的孩子有星星作伴</h4>
        </div>
    </div>
    <el-dialog v-model="slideVerifyDialog" title="滑动验证" width="340">
        <slide-verify :l="42" :r="10" :w="310" :h="155" ref="slideblock" @again="onAgain" @fulfilled="onFulfilled"
            @success="onSuccess" @fail="onFail" @refresh="onRefresh" :slider-text="text" :accuracy="accuracy"
            :imgs="imgs"></slide-verify>
    </el-dialog>
</template>
<script>
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            isVerify: false,
            slideVerifyDialog: false,
            loginForm: {
                username: '',
                password: '',
                code: ''
            },
            text: "向右滑动->",
            accuracy: 2,
            imgs: [],
        }
    },
    created() {
        this.imgs = [
            "https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
            "https://img1.baidu.com/it/u=1546227440,2897989905&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
            "https://image2.cqcb.com/2024-08-12/1723434649465_0.1682407324552071.png"
        ]
    },
    methods: {
        Login() {
            this.$router.push({
                path: '/myBlog'
            })
        },
        // 滑动验证码
        onSuccess(times) {
            // 验证通过
            this.isVerify = true;
            ElMessage({
                message: '验证通过',
                type: 'success',
            })
            this.handleClick();
            this.slideVerifyDialog = false;
        },
        // 验证失败
        onFail() {
        },
        // 滑块上的刷新
        onRefresh() {
        },
        // 刷新后执行的回调函数
        onFulfilled() {
        },
        // 检测是否人为操作
        onAgain() {
            console.log("检测到非人为操作！");
            this.msg = "try again";
            // 刷新
            this.$refs.slideblock.reset();
        },
        // 重置刷新
        handleClick() {
            this.$refs.slideblock.reset();
        },
    }
}
</script>
<style>
.loginBody .card .el-form .el-form-item__label {
    padding: 0;
    font-weight: bold;
    width: 65px !important;
}
</style>
<style lang="scss" scoped>
.loginBody {
    min-width: 100%;
    min-height: 100%;
    background-image: url("@/assets/image/loginBackground.jpg");
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .loginContent {
        .card_Login {
            background: rgba(255, 255, 255, 0.7);
            // opacity: 0.7;
            width: 648px;
            height: 400px;
            border-radius: 10px;

            .loginForm {
                width: 90%;
                margin: 0 auto;
                height: 80%;
                display: flex;

                img {
                    display: block;
                    width: 50%;
                    background: rgba(0, 0, 0, 1);
                    // opacity: 1;
                }

                .el-form {
                    display: grid;
                    place-items: center;
                    border: 1px solid rgb(228, 231, 237);
                    width: 50%;

                    .el-input {
                        width: 200px;
                    }

                    .el-button {
                        width: 260px;

                    }

                    a {
                        text-decoration: none;
                        display: inline-block;
                        font-size: 12px;

                    }
                }
            }
        }

        .card_Register {
            background: rgba(255, 255, 255, 0.7);
            // opacity: 0.7;
            width: 648px;
            height: 400px;
            border-radius: 10px;
            display: none;
        }

        h4 {
            font-family: "楷体";
            color: rgb(17, 121, 195);
        }
    }
}
</style>